<template>

  <div class="app-container">
<!--    表单开始-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="仓库编码">
        <el-input v-model="searchObj.warehouseNo" placeholder="仓库编码"></el-input>
      </el-form-item>
      <el-form-item label="条形码">
        <el-input v-model="searchObj.barCode" placeholder="条形码"></el-input>
      </el-form-item>
      <el-form-item label="选择时间段">
        <el-date-picker
          size="small"
          v-model="time"
          :picker-options="pickerOptions"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          range-separator="至"
          end-placeholder="结束日期"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </el-form-item>
    </el-form>

<!--    表格开始-->
    <el-table
      :data="stocks"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="specId"
        label="单品主键id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="goodsNo"
        label="货品编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="brandNo"
        label="品牌编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="brandName"
        label="品牌名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="货品名称"
        width="300">
      </el-table-column>

      <el-table-column
        prop="specNo"
        label="商家编码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="specName"
        label="规格名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="specCode"
        label="规格码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="barcode"
        label="条形码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="warehouseId"
        label="仓库主键id"
        width="120">
      </el-table-column>
      <el-table-column
        prop="warehouseNo"
        label="仓库编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="warehouseName"
        label="仓库名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="warehouseType"
        label="仓库类型"
        width="120">
      </el-table-column>
      <el-table-column
        prop="stockNum"
        label="库存量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="lockNum"
        label="锁定量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="recId"
        label="主键"
        width="120">
      </el-table-column>
      <el-table-column
        prop="created"
        label="创建时间"
        width="120">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @current-change="fetchData"
      :current-page="page"
      :page-size="limit"
      background
      style="text-align: center;padding: 30px"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
import stockApi from "@/api/stocks";

export default {
  name: "list",
  data() {
    return {
      page: 1 , //默认页码
      total: 0 ,// 总数量
      limit: 5,  // 默认每页条数
      stocks: [],// 库存数据
      time: [],   // 开始和结束时间
      pickerOptions: { //设置时间选择器的禁用时间
        disabledDate(time) {
          // let a = time.getTime() < Date.now() - 7200 * 1000 * 24 * 30  //限制过去的30天内
          // let b = time.getTime() > Date.now();  //限制不能超过今天
          // return a || b
        }
      },
      searchObj:{
        warehouseNo: '', // 仓库编码
        barCode: '' ,//   条形码
        startTime: '' ,// 默认开始时间
        endTime: '' // 默认结束时间
      },//查询条件

    }
  },
  created() {
    // 加载页面
    this.fetchData()
  },
  methods: {

    // 加载页面数据
    fetchData(currentPage = 1) {
      this.page = currentPage
      // 设置开始和结束时间
      this.searchObj.startTime = this.time[0];
      this.searchObj.endTime = this.time[1];

      // 加载页面
      stockApi.getStocksList(this.page,this.limit,this.searchObj).then(resp => {
        this.stocks = resp.stocks.records
        this.total = resp.stocks.total
      }).catch(err => {
        this.$message.error(err.message)
        console.log(err)
      })

    },

    // 行发生点击
    handleClick(row) {
      console.log(row);
    },

    // 清空条件
    resetData() {
      // 重置表单
      this.searchObj = {};
      this.time = []
      // 刷新页面
      this.fetchData();
    }
  }
}
</script>

<style scoped>

</style>
